<template>
	<view class="content bgGray">
		<u-swiper :list="list" height="700rpx" indicator circular v-if="list.length > 0"></u-swiper>
		<view v-else style="width: 100%; height: 700rpx; line-height: 700rpx; background: #fff; text-align: center">
			商家未上传图片
		</view>
		<view class="red fs13 pt10 textCenter" v-if="!isLogin">当前未登录，登录显示完整功能！</view>
		<view class="mt16 bgWhite p16">
			<view class="ellipsis">{{ info.tCommodityname }}</view>
		</view>
		<view class="mt16 bgWhite p16">
			<view class="ellipsis">所属商户：{{ isLogin ? info.tMerchantname : '****的店' }}</view>
		</view>
		<view class="p16 bgWhite flex-r ver-c mt16">
			<view>
				<view class="flex-r">
					<u-icon name="map-fill" color="#f00"></u-icon>
					<view class="ml10" @click="isLogin ? openMap(info.tLongitude, info.tLatitude) : ''">
						店铺地址：{{ isLogin ? info.tSpecificaddress : '*******' }}
					</view>
				</view>
			</view>
			<view class="f1 fs13">-</view>
		</view>
		<view class="mt16 bgWhite flex-r p16">
			<u-icon name="phone-fill" color="#0bbb4a"></u-icon>
			<view class="ellipsis ml10" @click="isLogin ? telPhone : ''">
				联系方式：{{ getDisplayPhoneNumber(info.tMerchantphone) }}
			</view>
		</view>
		<view class="p16 bgWhite mt16">商品详情：{{ info.tCommodityintroduce }}</view>
		<!-- <view>
			<image :src="xqImg" mode="widthFix" style="width: 100%" v-if="xqImg != ''"></image>
			<view class="mt16 bgWhite gray textCenter" style="line-height: 100rpx" v-else>商家未上传详情图片！</view>
		</view> -->
		<view class="btns m16 white textCenter" v-if="!isLogin" @click="handleLogin">登录</view>
		<view style="height: 20rpx"></view>
	</view>
</template>

<script>
import { ImgIP } from '@/utils/comm.js'
import Utils from '@/utils/utils.js'
import { getGoodDetail, addHistory, updatePageView } from '@/api/goods.js'
export default {
	data() {
		return {
			isLogin: false,
			info: {},
			list: [],
			//list: ['../../static/temp/xq1.jpg', '../../static/temp/xq2.jpg', '../../static/temp/xq3.jpg'],
			xqImg: '',
			tMerchantid: '' //商户id
		}
	},
	async onLoad(option) {
		let tCommodityid = option.tCommodityid
		await this.getLoginStatus()
		await this.getDetail(tCommodityid)
	},
	methods: {
		getLoginStatus() {
			let isLogin = Utils.getToken()
			console.log('isLogin??--', isLogin)
			if (isLogin) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
		},
		getDisplayPhoneNumber(phone) {
			if (!phone) return ''
			if (this.isLogin) {
				return phone
			} else {
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			}
		},
		getDetail(tCommodityid) {
			getGoodDetail(tCommodityid).then(
				(res) => {
					console.log('---->', res)
					this.tMerchantid = res.data.tMerchantid
					this.info = res.data
					let swiper = res.data.tCommodityimg
					if (swiper !== null) {
						let imgArr = swiper.split(',').map((image) => {
							return `${ImgIP}${image}`
						})
						this.list = imgArr
					}
					//console.log('swiper=', imgArr)
					let xqImg = res.data.tViewImg
					// if (res.data.tViewImg) {
					// 	this.xqImg = `${ImgIP}${xqImg}`
					// } else {
					// 	this.xqImg = ''
					// }
					console.log('xq=', this.xqImg)

					//添加浏览记录
					let tMemberid = Utils.getUserInfo().tMemberid
					let parmas = {
						tBrowseid: tMemberid,
						tMerchantid: this.tMerchantid,
						tBrowsecontent: this.info.tCommodityname
					}
					if (tMemberid) {
						addHistory(parmas).then(
							(res) => {
								console.log('浏览记录添加成功', res)
							},
							(err) => {
								console.log(err)
							}
						)
					}

					// 更新浏览量
					updatePageView(this.tMerchantid).then((res) => {
						console.log('浏览量更新成功', res)
					})
				},
				(err) => {
					console.log(err)
				}
			)
		},
		telPhone() {
			uni.makePhoneCall({
				phoneNumber: this.info.tMerchantphone
			})
		},
		handleLogin() {
			uni.navigateTo({
				url: '/pages_B/login/login'
			})
		},
		openMap(lon, lat) {
			console.log(lon, lat)
			uni.getLocation({
				success: (res) => {
					// res.latitude=lat;
					// res.longitude=lon;
					console.log('location success', parseFloat(lat), parseFloat(lon))
					uni.openLocation({
						latitude: parseFloat(lat),
						longitude: parseFloat(lon)
						//scale: 18
					})
				}
			})
		}
		// toMap(img) {
		// 	console.log(ImgIP + img)
		// 	if (img === null) {
		// 		uni.$u.toast('商户未上传地址图片！')
		// 		return false
		// 	} else {
		// 		uni.previewImage({
		// 			urls: [ImgIP + img],
		// 			current: '',
		// 			success: function (res) {},
		// 			fail: function (res) {},
		// 			complete: function (res) {}
		// 		})
		// 	}
		// }
	}
}
</script>

<style lang="stylus" scoped>
.content
	height 100%
	padding-bottom calc(var(--window-bottom) + 240rpx)
.ellipsis
	-webkit-line-clamp 2
	display -webkit-box
	-webkit-box-orient vertical
	overflow hidden
	text-overflow ellipsis
.fixed
	position fixed
	bottom 0
	left 0
	right 0
.btn
	border-radius 100rpx
	padding 0 30rpx
	line-height 90rpx
	background linear-gradient(90deg, #f9211c, #ff6335)
.btns
	line-height 100rpx
	height 100rpx
	border-radius 50rpx
	background #c40414
</style>
